<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--suppress ALL-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>团队活动|蜗牛宠物领养平台</title>

    <link rel="shortcut icon" th:href="@{/asserts/images/favicon.ico}" type="image/x-icon"/>
    <!-- Bootstrap的css -->
    <link rel="stylesheet" th:href="@{/asserts/bootstrap3.4.1/css/bootstrap.min.css}">
    <!-- jQuery本地-->
    <script th:src="@{/asserts/js/jQuery-3.6.0.js}"></script>
    <!-- 加载本地js -->
    <script th:src="@{/asserts/bootstrap3.4.1/js/bootstrap.min.js}"></script>
    <!-- 加载common.css -->
    <link rel="stylesheet" th:href="@{/asserts/css/common.css}"/>
    <!-- 加载页头页尾css -->
    <link rel="stylesheet" th:href="@{/asserts/css/top.css}"/>
    <link rel="stylesheet" th:href="@{/asserts/css/foot.css}"/>
    <!-- 加载页头页尾js -->
    <script th:src="@{/asserts/js/top.js}"></script>

</head>
<body th:style="'background-image: url(/asserts/images/bg3.jpg)'">
<!-- 页头 -->
<nav th:replace="nav::headerBar"></nav>
<div class="container" style="height:800px">

    <div style="height: 100px">
        <h1 style="text-align: center;font-style: italic; font-size: 100px;color:#FFFFFF;">团队活动</h1>
    </div>

    <div style="height: 533px; margin-top: 100px">

        <li th:each="a : ${pageActivity.list}" style="margin-bottom: 20px ; overflow:hidden">
            <div th:text="${#dates.format(a.activityStartTime,'yyyy-MM-dd HH:mm:ss')}+'--'+${#dates.format(a.activityEndTime,'yyyy-MM-dd HH:mm:ss')}"
                 style="height: 120px ;
                 width: 210px ;
                 color: #0f0f0f;
                 font-size: 20px;
                 background-color:#00cdc1;
                 float: left ;
                 padding-top: 10px;">
            </div>

            <div style="background-color:#0f0f0f ; opacity:0.5; float: right ;width: 950px ; height: 120px">
                <div th:text="${a.name}" style="text-align: center; font-size: 20px;color: red"></div>
                <span style="color: #ff6700">活动地址 :</span>
                <div th:text="${a.address}" style="color: #FFFFFF"></div>
                <span style="color: #ff6700">活动简介 : </span>
                <div th:text="${a.introduce}" style="color: #FFFFFF"></div>
            </div>

        </li>

    </div>

    <div>
        <span class="btn-lg" style="margin-left: 100px; color: #FFFFFF">总活动数:</span>
        <span class="btn-lg" style="color: #FFFFFF" th:text="${pageActivity.total}"></span>
        <span class="btn-lg" style="color: #FFFFFF">总页数:</span>
        <span class="btn-lg" style="color: #FFFFFF" th:text="${pageActivity.pages}"></span>
        <span class="btn-lg" style="color: #FFFFFF">当前页:</span>
        <input id="jumpNow" style="width: 30px;" th:value="${pageActivity.pageNum}">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-success" onclick="jump()">跳转</button>
        <button type="button" class="btn btn-success btn-lg" style="margin-left: 100px;" onclick="go(1)">首页</button>
        <button type="button" class="btn btn-success btn-lg" th:onclick="go([[${pageActivity.prePage}]])">上一页</button>
        <button type="button" class="btn btn-success btn-lg" th:onclick="go([[${pageActivity.nextPage}]])">下一页</button>
        <button type="button" class="btn btn-success btn-lg" th:onclick="go([[${pageActivity.pages}]])">尾页</button>
    </div>

</div>
<!-- 页尾 -->
<footer th:replace="nav::footBar"></footer>
</body>
<style>
    body {
        background-size: 100%, 100%;
    }

</style>


<script>

    function go(now) {
        if (now == 0) {
            return;
        } else {
            let url = '[[@{/activity/list}]]' + '?now=' + now;
            window.location.href = url;
        }
    }

    function jump() {
        let now = $("#jumpNow").val();
        go(now);
    }

</script>
</html>